{% extends 'base.html' %}

{% block title %}
搜索结果 - 数据管理系统
{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item active" aria-current="page">搜索结果</li>
{% endblock %}

{% block content %}

 
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="page-header">搜索结果</h2>
  <div>
    <button id="addToCartBtn" class="btn btn-primary me-2" disabled><i class="bi bi-cart-plus"></i> 添加到购物车</button>
    <a href="{{ url_for('cart.cart') }}" class="btn btn-primary"><i class="bi bi-cart"></i> 查看购物车</a>

  </div>
</div> 
<div id="cartStatus" class="text-muted small mt-2"></div>

{% if query %}
<p class="mb-4">
  搜索关键词: <strong>"{{ query }}"</strong>
</p>
{% endif %}

{% if results %}
<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-light">
      <tr class="clickable-row">
        <th scope="col">
          <input type="checkbox" id="selectAll" class="form-check-input larger-checkbox" title="全选" />
        </th>
        <th scope="col">ID</th>
        <th scope="col">用户</th>
        <th scope="col">标题</th>
        <th scope="col">公司名称</th>
        <th scope="col">匹配类型</th>
        <th scope="col">对方型号</th>
        <th scope="col">自用型号</th>
        <th scope="col">价格</th>
        <th scope="col">库存</th>
        <th scope="col">图片</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      {% for result in results %}
      <tr>
        <td>
          <input type="checkbox" class="product-checkbox form-check-input larger-checkbox"
            data-product-id="{{ result.main.id }}" title="选择产品" />
        </td>
        <td>{{ result.main.id }}</td>
        <td>{{ result.main.user.username }}</td>
        <td>
          <a href="{{ url_for('list_details', product_id=result.main.id) }}">{{ result.main.title }}</a>
        </td>

        <td>{{ result.main.company_name }}</td>
        <td>
          {% if result.match_type == 'main' %}
          <span class="badge bg-primary">主信息匹配</span>
          {% else %}
          <span class="badge bg-success">型号匹配</span>
          {% endif %}
        </td>
        <td>
          {% if result.detail.other_model and query.lower() in result.detail.other_model.lower() %}
          <mark>{{ result.detail.other_model }}</mark>
          {% else %}
          {{ result.detail.other_model }}
          {% endif %}
        </td>
        <td>
          {% if result.detail.self_model and query.lower() in result.detail.self_model.lower() %}
          <mark>{{ result.detail.self_model }}</mark>
          {% else %}
          {{ result.detail.self_model }}
          {% endif %}
        </td>
        <td>
          {% if result.detail.price %}
          ¥{{ '%.2f'|format(result.detail.price) }}
          {% else %}
          -
          {% endif %}
        </td>
        <td>
          {{ result.detail.stock_str }}
        </td>
        <td>
          {% if result.detail.local_image_path %}
          <a href="javascript:void(0);" onclick="{{ result.detail.display_image_url }}"><img
              src="{{ result.detail.display_image_url }}" alt="产品图片" class="img-thumbnail"
              style="max-width: 200px;" /></a>
          {% else %}
          <span class="text-muted">无图片</span>
          {% endif %}
        </td>
        <td>
          <div class="d-flex flex-nowrap gap-2">
            <a href="{{ url_for('list_details', product_id=result.main.id) }}" class="btn btn-sm btn-outline-success"

              target="_blank">详情</a>
            <a href="{{ url_for('edit_main', id=result.main.id) }}" class="btn btn-sm btn-outline-primary">编辑</a>

            <!-- <div class="ms-1">
              <button type="button" class="btn btn-sm btn-outline-danger"
                onclick="if(confirm('确定删除吗?')) window.location='{{ url_for('delete_main', id=result.main.id) }}'">
                <i class="bi bi-trash"></i>
                <span class="d-none d-sm-inline">删除</span>
              </button>
            </div> -->
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="alert alert-info">
  {% if query %}
  没有找到匹配的结果
  {% else %}
  请输入搜索关键词
  {% endif %}
</div>
{% endif %}

<div>
  <span>&nbsp;</span>
  <!-- 
添加到购物车思路
1. 初始化与基础设置
页面加载完成后初始化 Bootstrap 工具提示组件
设置图片模态框的点击关闭逻辑（点击模态框背景关闭，点击图片本身不关闭）

2. 复选框选择逻辑
全选功能：当 "全选" 复选框变化时，同步所有商品复选框的状态
单选功能：当单个商品复选框变化时，检查是否所有商品都被选中以更新全选框状态
行点击选择：点击商品行（排除链接、按钮和输入框区域）可以切换对应商品的选中状态

3. 按钮状态控制
updateButtonState()函数实时检查选中的商品数量
当没有商品被选中时，"添加到购物车" 按钮处于禁用状态
有商品被选中时，按钮变为可用状态

4. 添加到购物车核心逻辑
点击按钮后，先禁用按钮并显示 "正在添加..." 状态提示
收集所有被选中商品的 ID（从复选框的data-product-id属性中获取）
通过fetch API 向后端cart.add_to_cart接口发送 POST 请求，携带选中的商品 ID 数组

处理后端响应，显示后端返回的消息

    如果添加成功，清除所有选中状态并更新按钮状态

    如果失败，显示错误信息
无论成功与否，最后都会重新启用按钮
-->
</div>
{% endblock %}

{% block scripts %}
<script>
  // 初始化工具提示和模态框
  document.addEventListener('DOMContentLoaded', function () {
    // 初始化 Bootstrap工具提示
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })

    // 图片模态框点击事件
    document.getElementById('imageModal').addEventListener('click', function (e) {
      if (e.target === this) {
        bootstrap.Modal.getInstance(this).hide()
      }
    })
    document.getElementById('modalImage').addEventListener('click', function (e) {
      e.stopPropagation()
    })

    // 复选框和行点击逻辑
    const selectAllCheckbox = document.getElementById('selectAll')
    const productCheckboxes = document.querySelectorAll('.product-checkbox')
    const addToCartBtn = document.getElementById('addToCartBtn')
    const cartStatus = document.getElementById('cartStatus')

    // 更新按钮状态
    function updateButtonState() {
      const selectedIds = Array.from(productCheckboxes).filter((cb) => cb.checked)
      addToCartBtn.disabled = selectedIds.length === 0
    }

    // 全选复选框事件
    selectAllCheckbox.addEventListener('change', function () {
      productCheckboxes.forEach((cb) => {
        cb.checked = this.checked
      })
      updateButtonState()
    })

    // 单选复选框事件
    productCheckboxes.forEach((cb) => {
      cb.addEventListener('change', function (e) {
        e.stopPropagation()
        selectAllCheckbox.checked = Array.from(productCheckboxes).every((cb) => cb.checked)
        updateButtonState()
      })
    })

    // 行点击事件
    document.querySelectorAll('.clickable-row').forEach((row) => {
      row.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON' || e.target.closest('a') || e.target.closest('button') || e.target.tagName === 'INPUT' || e.target.closest('.action-buttons')) {
          return
        }

        const checkbox = row.querySelector('.product-checkbox')
        checkbox.checked = !checkbox.checked
        selectAllCheckbox.checked = Array.from(productCheckboxes).every((cb) => cb.checked)
        updateButtonState()
      })
    })

    // 添加到购物车按钮事件
    addToCartBtn.addEventListener('click', function () {
      this.disabled = true
      cartStatus.textContent = '正在添加...'

      const selectedIds = Array.from(productCheckboxes)
        .filter((cb) => cb.checked)
        .map((cb) => cb.dataset.productId)

      console.log(selectedIds)

      fetch('{{ url_for("cart.add_to_cart") }}', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ product_ids: selectedIds })
      })
        .then((res) => res.json())
        .then((data) => {
          cartStatus.textContent = data.message
          if (data.success) {
            productCheckboxes.forEach((cb) => (cb.checked = false))
            selectAllCheckbox.checked = false
            updateButtonState()
          }
        })
        .catch((err) => {
          console.error(err)
          cartStatus.textContent = '添加失败，请检查控制台或后端日志'
        })
        .finally(() => {
          this.disabled = false
        })
    })
  })


</script>

{% endblock %}
